<template>
	<view class="container">
		<view class="sea-box padding">
			<text class="text-h3">界面布局</text>
			<text class="text-block">对于常规的界面布局，个人并不喜欢二次封装，通过 class-name 自由排列组合即可。</text>
			<text class="text block">
				有点类似于 bootstrap 环境下的 box 设计，HBuilder 中代码提示挺好，上手估计不成问题
			</text>
		</view>

		<view class="sea-box">
			<view class="block-row">
				<text class="text-h3">块元素</text>
			</view>
			<view class="block-row">
				<text class="text-h4">.container</text>
				<text class="text-block">决定了界面基础色调，目前规定底色为浅灰色</text>
				<text class="text-h4">.sea-box</text>
				<text class="text-block"> 盒模型，规定了基本的边框、背景色属性，如果需要改成卡片布局，调整当前样式即可； </text>
				<text class="text-h4">.sea-panel</text>
				<text class="text-block">与 box 效果一致，去除了内外边框</text>
			</view>
		</view>

		<view class="sea-box">
			<view class="block-row">
				<text class="text-h3">.block-row（单行盒模型）</text>
			</view>
			<view class="block-row" style="background-color: lightblue;">
				<text class="text block">* 单行 block 元素，横向撑满一行；</text>
				<text class="text block">* 已经设计好边框、内边距，效果如当前这一行所示；</text>
			</view>
		</view>

		<view class="sea-box">
			<view class="block-row">
				<text class="text-h3">.flex-row（左中右布局）</text>
			</view>
			<view class="flex-row">
				<view class="box-left bg-danger">box-left</view>
				<view class="box-body bg-primary">box-body</view>
				<view class="box-right bg-success">box-right</view>
			</view>
			<view class="flex-row">
				<view class="box-left bg-danger">box-left</view>
				<view class="box-body bg-primary">box-body</view>
			</view>
			<view class="flex-row">
				<view class="box-body bg-primary">box-body</view>
				<view class="box-right bg-success">box-right</view>
			</view>
			<view class="flex-row">
				<view class="box-left border-right">1</view>
				<view class="box-body border-right">可以通过调整 class-name 设置边框</view>
				<view class="box-right">3</view>
			</view>
		</view>

		<view class="sea-box">
			<view class="block-row">
				<text class="text-h3">.flex-column（上中下布局）</text>
			</view>
			<view class="flex-column no-border" style="height: 30vh;">
				<view class="box-header" style="background-color: lightblue;">box-header</view>
				<view class="box-body" style="background-color: aliceblue;">box-body</view>
				<view class="box-footer" style="background-color: lightpink;">box-footer</view>
			</view>
		</view>

		<view class="bottom-space padding">
			<text class="text-h3 margin-right">.bottom-space</text>
			<text class="text">
				点击屏幕最下方的按钮，是一件很麻烦的事情，使用这个样式，保留一定的边框，允许用户将最底下的内容拖拽到屏幕中间
			</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style>

</style>